<template>
    <div class="page-sidedata">
        <div class="page-sidedata-tab">
            <div v-for="(item, index) in tableData" :key="index" class="page-sidedata-tabitem" :class="{'page-sidedata-tabitema': item.type == curItem}" @click="setItem(item)">
                {{ item.name }}
            </div>
        </div>
        <div class="page-sidedata-content">
            <book  v-if="curItem == 'book'"/>
            <intercom v-if="curItem == 'intercom'" />
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import book from './book.vue'
import intercom from './intercom.vue'
const curItem = ref('book')
const tableData = ref([
    {
        name: '通讯录',
        type: 'book'
    },
    {
        name: '对讲组',
        type: 'intercom'
    }
])

const setItem = (e) => {
    curItem.value = e.type
}
</script>

<style lang="scss" scoped>
.page-sidedata{
    position: absolute;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    &-tab{
        display: flex;
        flex-direction: row;
        border: #2F7AFE 1px solid;
        height: 40px;
        line-height: 40px;
    }
    &-tabitem{
        flex:1;
        text-align: center;
        color: #fff;
        font-weight: bold;
        cursor: pointer;
    }
    &-tabitema{
       background: #2F7AFE;
    }
    &-content{
        flex:1;
        overflow: hidden;
        margin-top: 12px;
    }
}
</style>